<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>同胞（兄弟）</title>
  <script src="../jquery/jquery-3.3.1.min.js"></script>
    <script>
     $(function (){
      $("#a1").click(function (){
          $("div").siblings().css("backgroundColor","yellow");
      });
         $("#a2").click(function (){
             $("div").siblings("p").css("backgroundColor","red");
         })
         $("#a3").click(function (){
             $("div").next().css("backgroundColor","green");
         })
     });
    </script>
</head>
<body>
<h2>$("div").siblings()将选中什么?</h2>
<h2>$("div").siblings("p")将选中什么?</h2>
<h2>$("div").next 将选中什么?</h2>
<p>这是一个P元素，是div的兄弟元素。</p>

<!--<div style="border:1px solid black;padding:10px;">这是一个P元素。</div>-->

<p>这是一个P元素，是div的兄弟元素。</p>

<p>这也是一个P元素，是div的兄弟元素。</p>

<div style="border:1px solid black;padding:10px;">
    <p>这是div内的一个P元素(div的子节点)。</p>
</div>

<h2>这是一个标题ssssssssssssssssssssssssssss</h2>

<p>这是div的另一个兄弟节点。</p>
<a href="javascript:void(0);" id="a1">选择div的同胞</a>
<a style="margin-left: 30px" href="javascript:void(0);" id="a2">选择div的筛选同胞</a>
<a style="margin-left: 30px" href="javascript:void(0);" id="a3">选择div的下一个同胞元素</a>
</body>
</html>